/**
 * @author ccpalu
 */

 function clinicalMap(behest){
	var clin = document.getElementById('CNV').clinical;
	if (clin.labels.length) {
		var graphicVar = document.getElementById('graphicVariables');
		var clinicalDiv = document.getElementById('clinicalDiv');
		if (clinicalDiv == null){
			var clinicalDiv= document.createElement('DIV');
			clinicalDiv.id='clinicalDiv';
			document.body.appendChild(clinicalDiv);
		}
		else{
			cleanObject(clinicalDiv);
		}
		if (document.getElementById('legendHB') == null) {
			legendHeatBar();
		}
		else{
			document.getElementById('legendHB').style.left = graphicVar.clinicalLeft();
		}
		
		var segW = graphicVar.segmentWidth;
		var segH = graphicVar.segmentHeight;
		var h = graphicVar.generalHeight();
		var t = graphicVar.top;
		var l = graphicVar.clinicalLeft();
		var w = graphicVar.clinicalWidth();
		
		var canvas = createCanvas(w, h, 'clinicalData', clinicalDiv);
		setPosition(canvas, l, t);
		canvas.style.backgroundColor = '#FFFFFF';
		var ctx = canvas.getContext("2d");
		
		var xi, wid, yi, legend = new Array (clin.labels.length);
		
				
		for (var i = 0; i < clin.labels.length; i = i + 1) {
			legend[i] = createParagraph('clinicalLabelNumber'+ (i+1), i + 1, 'clinicalDiv');
			setFont(legend[i], "10px");
			setPosition(legend[i], l + 2 + i * segW * 1.3, t - 12);
			
			outcome = clin[clin.labels[i]];
			xi = i * segW * 1.3;
			
			for (var j = 0; j < behest.length; j = j + 1) {
			
				yi = segH * j;
				
				ctx.fillStyle = outcome.color[behest[j]];
				ctx.fillRect(xi, yi, segW, segH);

			}
			var div = document.createElement('DIV');
			div.id = 'clinicalMapDiv' + i;
			document.getElementById("subTitleHB" + (i + 1)).appendChild(div);
			div.style.width = segW;
			div.style.height = h;
			div.style.zIndex = 2;
			setPosition(div, xi - div.parentNode.style.left.replace('px', '') * 1 , t - 14 - div.parentNode.style.top.replace('px', '') * 1 - div.parentNode.parentNode.style.top.replace('px', '') * 1, 'absolute');
			
		}
	}
	return false
}

function heatbarDetail(){
	var div= document.createElement('div');
	div.id='hbDetail';
	div.style.width = '120px';
	div.style.height = '180px';
	div.style.bottom='250px';
	div.style.right= "5px";
	div.style.position='fixed';
	div.style.backgroundColor="#e8edf9";
	div.style.display="none";
	div.style.zIndex='20';
	document.getElementById('chartingArea').appendChild(div);
	return false;
}

function legendHeatBar(){
	var clin=document.getElementById('CNV').clinical;
	var HB = document.createElement('DIV');
	var graphicVar= document.getElementById('graphicVariables');
	var numColumns = Math.ceil(clin.labels.length/10);
	var numRows = Math.ceil(clin.labels.length/numColumns);
	var columnWidth = 120;
	var shortLegend;
	heatbarDetail();
	
	HB.id='legendHB';
	document.body.appendChild(HB);
	setPosition(HB, graphicVar.clinicalLeft(), 5+(20*(14-numRows)));
	HB.style.width=numColumns*columnWidth+'px';
	setFont(createParagraph("legendHBtitle","Complementary Data", HB),'16px',0,'center','bold');
		
	var barH = 100;
	var x, y=numRows*-1;
	
	for (var i = 0; i < clin.labels.length; i = i + 1) {
		if (0==(i%numRows)){
			x = (i/numRows)*columnWidth;
			y=y+numRows;
		}
		if (clin.labels[i].length > 10) {
			shortLegend = (i + 1) + "-\t" ;
			for (var j = 0; (j < 14) && (j < clin.labels[i].length); j = j + 1) {
				shortLegend = shortLegend + clin.labels[i][j];
			}
				var subLegendHb = createParagraph("subTitleHB" + (i + 1), shortLegend, HB);
				setFont(subLegendHb, '10px');//, 0 ,0, 'bold'
				setPosition(subLegendHb, x, (20 * (i - y)) + 49);			
		}
		else {
			var subLegendHb = createParagraph("subTitleHB" + (i + 1), (i + 1) + " -\t" + clin.labels[i], HB);
			setFont(subLegendHb, '12px');//, 0 ,0, 'bold'
			setPosition(subLegendHb, x, (20 * (i - y)) + 45);
		}
		subLegendHb.style.textTransform = "capitalize";
		subLegendHb.index=i;
				
		if (navigator.appName!="Microsoft Internet Explorer"){
			subLegendHb.showHbDetail = function(){
				
				var detail = document.getElementById('hbDetail');
							
				var title = createParagraph("detailTitle",this.innerHTML,detail);
				try {
					var outcome = document.getElementById('CNV').clinical[document.getElementById('CNV').clinical.labels[this.index]].category;
				}
				catch (e){
					console.log(this);
				}
				var barH = 120, segW = 15, segH= barH / outcome.length, l=5, xi, yi;
				var t= 35, l=15, w = detail.style.width.replace("px","")*1;

				setFont(title,'12px',0,'center','bold','capitalize');
				title.style.width = detail.style.width;
				title.style.overflow = 'hidden'; 
				
				var canvas = createCanvas(segW, barH,'legendHBcanvas'+this.index, detail);
				canvas.style.backgroundColor = '#FFFFFF';
				setPosition(canvas, l,t+3);
				canvas.style.zIndex=detail.style.zIndex+1;
				var ctx = canvas.getContext("2d");
		
				for (var j = 0; j < outcome.length; j = j + 1) {
					yi = segH * j;
					ctx.fillStyle = heatMapHexa((j * 4) / (outcome.length-1));
					ctx.fillRect(0, yi, segW, segH);
				}
		
				if (outcome.length <= 8) {
					for (var m = 0; m < outcome.length; m = m + 1) {
						var categoryHb = createParagraph("categoryHB" + (i + 1) + "_" + (m + 1), outcome[m], detail);
						setFont(categoryHb, '12px');
						categoryHb.innerHTML = categoryHb.innerHTML.replace (/\./g,' ');
						categoryHb.innerHTML = categoryHb.innerHTML.replace (/\_/g,' ');
						categoryHb.style.textTransform = "lowercase";
						categoryHb.style.width = '84px';
						setPosition(categoryHb, l + segW + 2, t + m * segH + (segH / 2));
						
					}
				}
				else {
					for (var m = 0; m < 5; m = m + 1) {
						var categoryHb = createParagraph("categoryHB" + (i + 1) + "_" + (m + 1), outcome[Math.round(m * ((outcome.length - 1) / 4))], detail);
						setFont(categoryHb, '12px');
						categoryHb.innerHTML = categoryHb.innerHTML.replace (/\./g,' ');
						categoryHb.innerHTML = categoryHb.innerHTML.replace (/\_/g,' ');
						categoryHb.style.textTransform = "lowercase";
						categoryHb.style.width = '84px';
						setPosition(categoryHb, l + segW + 2, t + m * (barH / 4));
					}
				}
				detail.style.overflow="hidden";
				detail.style.display="";
				return false;
			}
			subLegendHb.hideHbDetail = function(){
				var detail = document.getElementById('hbDetail');
				detail.style.display="none";
				cleanObject(detail);
				return false;
			}
			subLegendHb.onmouseover=subLegendHb.showHbDetail;
			subLegendHb.onmouseout=subLegendHb.hideHbDetail;
		}
	}
	return false;
}


function legendHeatBarB(){
	var clin=document.getElementById('CNV').clinical;
	var HB = document.createElement('DIV');
	var graphicVar= document.getElementById('graphicVariables');
	var numColumns = Math.ceil(clin.labels.length/14);
	var numRows = Math.ceil(clin.labels.length/numColumns);
	var columnWidth = 120;
	
	HB.id='legendHB'+numRows;
	document.body.appendChild(HB);
	setPosition(HB, graphicVar.clinicalLeft(), 5+(20*(14-numRows)));
	HB.style.width=numColumns*columnWidth+'px';
	setFont(createParagraph("legendHBtitle","Clinical Data", HB),'16px',0,'center','bold');
	
	var barH = 100;
	var segW = 15;
	var outcome,segH, x, yi, y=numRows*-1;
	
	for (var i = 0; i < clin.labels.length; i = i + 1) {
		if (0==(i%numRows)){
			x = (i/numRows)*columnWidth;
			y=y+numRows;
		}
		
		var subLegendHb = createParagraph("subTitleHB" + (i+1), (i+1) + " -\t" + clin.labels[i], HB);
		setFont(subLegendHb,'14px');//, 0 ,0, 'bold'
		subLegendHb.style.textTransform="capitalize";
		setPosition(subLegendHb, x , (20*(i-y))+45);
		
	}
	return false;
}

function legendHeatBarA(){
	var clin=document.getElementById('CNV').clinical;
	var HB = document.createElement('DIV');
	var graphicVar= document.getElementById('graphicVariables');
	HB.id='legendHB';
	document.body.appendChild(HB);
	setPosition(HB, graphicVar.clinicalLeft(), 5);
	//HB.style.width=graphicVar.clinicalWidth()+'px';
	setFont(createParagraph("legendHBtitle","Clinical Data", HB),'16px',0,'center','bold');
	//setPosition(HBp,60-l, 0,'relative');
	
	var barH = 100;
	var segW = 15;
	var outcome,segH, x, yi, y;
	
	var canvas = createCanvas(Math.ceil(clin.labels.length/2)*100, barH*2+60,'legendHBcanvas', HB);
//	setPosition(canvas,0,18,'relative' );
	var ctx = canvas.getContext("2d");
	
	for (var i = 0; i < clin.labels.length; i = i + 1) {
		outcome = clin[clin.labels[i]].category;
		if (i % 2) {
				y= 60 + barH;
		}
		else {
			y = 20;
		}
		x = Math.floor(i/2)*100;
		segH = barH / (outcome.length);

		for (var j = 0; j < outcome.length; j = j + 1) {
			yi = y+ segH * j;
			ctx.fillStyle = heatMapHexa((j * 4) / (outcome.length-1));
			ctx.fillRect(x, yi, segW, segH);
		}
		var subLegend =  (i+1) + " - " + clin.labels[i];
		if (subLegend.length>14){
			subLegend=subLegend.replace(' ','');
			if (subLegend.length > 14) {
				var subLegendAux = '';
				for (var k = 0; k < 14; k = k + 1) {
					subLegendAux[k] = subLegend[k];
				}
				subLegend = subLegendAux;
			}
		}
		
		var subLegendHb = createParagraph("subTitleHB" + (i+1), subLegend, HB);
		setFont(subLegendHb,'11px', 0 ,0, 'bold');
		subLegendHb.style.textTransform="uppercase";
		setPosition(subLegendHb, x , y+34);
		
		
		if (outcome.length<=8) {
			for (var l = 0; l < outcome.length; l = l + 1) {
				var categoryHb = createParagraph("categoryHB" + (i + 1) + "_" + (l+1), outcome[l], HB);
				setFont(categoryHb, '11px', 0, 0, 'bold');
				categoryHb.innerHTML = categoryHb.innerHTML.replace (/\./g,' ');
				categoryHb.innerHTML = categoryHb.innerHTML.replace (/\_/g,' ');
				categoryHb.style.textTransform = "lowercase";
				categoryHb.style.width = '84px';
				setPosition(categoryHb, x+segW+1, y + 48 + l*segH + (segH/2));
			}
		}
		else {
			for (var l = 0; l < 5; l = l + 1) {
				var categoryHb = createParagraph("categoryHB" + (i + 1) + "_" + (l+1), outcome[Math.round(l*((outcome.length-1)/4))], HB);
				setFont(categoryHb, '11px', 0, 0, 'bold');
				categoryHb.innerHTML = categoryHb.innerHTML.replace (/\./g,' ');
				categoryHb.innerHTML = categoryHb.innerHTML.replace (/\_/g,' ');
				categoryHb.style.textTransform = "lowercase";
				categoryHb.style.width = '84px';
				setPosition(categoryHb, x+segW+1, y + 48 + l*(barH/4) );
			}
		}
	}
	return false;
}

